<template>
  <div class="section">
              <div>
      <el-form class="oldIndent_nav" ref="dataForm">
        <div style="margin-bottom:20px;padding-top:5px;">
             <span style="margin-left:60px">院区：</span>
          <el-input placeholder="请输入院区：" style="width:200px"></el-input>
           <span style="margin-left:60px">科室：</span>
           <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
           <el-button type="primary" round style="float:right;margin-right:200px">查询</el-button>
        </div>
      </el-form>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="area" align="center" label="院区"></el-table-column>
      <el-table-column prop="id" align="center" label="科室编号"></el-table-column>
      <el-table-column prop="name" align="center" label="科室名称"></el-table-column>
      <el-table-column prop="long" align="center" label="年龄限制"></el-table-column>
      <el-table-column prop="text" align="center" label="科室描述"></el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-col :span="24" class="toolbar" style="text-align: center;">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-count="pageNum"
        :page-size="pagesize"
        style="margin-top:30px;margin-bottom:30px"
        layout="total, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-col>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentPage: 1, // 初始页
      pagesize: 10, // 当前页面内的列表行数
      pageCount: 1,
      pageNum: 1, //页数
      total: 5,
        options: [
        {
          value: "1",
          label: "眼科"
        },
        {
          value: "2",
          label: "骨科"
        },
        {
          value: "3",
          label: "肛肠科"
        },
        {
          value: "4",
          label: "眼科"
        },
        {
          value: "5",
          label: "神经科"
        }
      ],
      value: "1",
      tableData: [
        {
          id: "415615",
          area: "邵逸夫",
          name: "骨科",
          text:
            "治疗骨折，腰椎盘突出，股骨头坏死，关节炎，人工关节置换，骨癌等",
          long: "无限制"
        },
        {
          id: "892132",
          area: "邵逸夫",
          name: "消化科",
          text:
            "主治胃食管反流病、食管癌、胃炎、消化性溃疡、胃癌、炎症性肠病、大肠癌、功能性胃肠病、慢性腹泻、肠炎、肠结核、慢肝炎、酒精性肝病、肝硬化、原发性肝癌、肝性脑病、胰腺炎、胰腺癌、消化道出血等",
          long: "无限制"
        },
        {
          id: "486523",
          area: "邵逸夫",
          name: "肿瘤科",
          text:
            "主治乳腺癌、肺癌、肝癌、胃癌、结肠癌、直肠癌、食管癌、胰腺癌、鼻咽癌、膀胱癌、宫颈癌、前列腺癌、卵巢癌、肾癌、甲状腺癌、淋巴瘤、白血病、子宫内膜癌、黑色素瘤、骨肉瘤。",
          long: "无限制"
        },
        {
          id: "842321",
          area: "邵逸夫",
          name: "神经科",
          text:
            "主治脑血管疾病（脑梗塞、脑出血）、偏头痛、脑部炎症性疾病（脑炎、脑膜炎）、脊髓炎、癫痫、痴呆、代谢病和遗传倾向疾病、三叉神经痛、坐骨神经病、周围神经病及重症肌无力等",
          long: "无限制"
        },
        {
          id: "944412",
          area: "邵逸夫",
          name: "口腔科",
          text:
            "口腔美容、种植牙、牙齿正畸、口腔溃疡、口腔炎症等",
          long: "无限制"
        },
      ]
    };
  },
  methods: {
    //当前页
    handleSizeChange: function(pagesize) {
      this.pagesize = pagesize;
    },
    // 换页：更新列表数据
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
    }
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.section {
  margin-top: 55px;
}
</style>